// http://ionicframework.com/docs/theming/

// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

// 自定义alert样式,使alert的显示级别为最高
.alert-zIndex-highest {
  z-index: 100100 !important;
}

/* 增加可点击范围 */
.add-tap-range::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}

/*主题颜色变量*/
$color-primary: color($colors, primary);

// 自定义表单默认样式
.myForm {
  $label-width: 62px;
  $danger-color: #f53d3d;
  ion-item {
    font-size: 1.5rem;
  }
  ion-label {
    min-width: $label-width;
    &[required]:before, &.required:before {
      position: absolute; /* 使用绝对定位让*不占用位置 */
      color: $danger-color;
      content: '*';
      margin-left: -8px;
      margin-top: 3px;
    }
    &.too-long { /* label内容超过$label-width自动换行 */
      text-overflow: inherit;
      white-space: normal;
      margin: 1px 8px 1px 0;
      width: $label-width;
    }
  }
  ion-datetime, ion-select {
    width: 100%;
    max-width: 100%;
  }

  .form-invalid-tip {
    padding: 1px 16px;
    color: $danger-color;
    line-height: 18px;
    > div:before {
      content: '!';
      display: inline-block;
      text-align: center;
      font-size: 14px;
      color: #fff;
      width: 17px;
      height: 16px;
      background: $danger-color;
      border-radius: 50%;
      margin-right: 2px;
    }
  }

  .form-item-content {
    width: 100%;
    margin: 11px 0 11px 16px;
    .form-radio, .form-checkbox {
      margin-right: 8px;
      display: inline-block;
    }
    .form-textarea {
      min-height: 18px;
      max-height: 100px; /* 自定义最大高度，超出会显示滚动条 */
      overflow: auto;
      outline: none;
      -webkit-user-select: text;
    }
    .form-textarea-placeholder:before {
      content: '说你想说的...';
      position: absolute;
      color: #999;
      text-overflow: clip;
      z-index: -1;
    }
    .form-number-step {
      input {
        width: 30px;
        border: none;
        text-align: center;
        vertical-align: bottom;
        line-height: 22px;
      }
      ion-icon {
        font-size: 22px;
        font-weight: bold;
        color: #999;
        background: #eee;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        text-align: center;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          top: -5px;
          bottom: -5px;
          right: -5px;
          left: -5px;
        }
      }
    }
  }


}
